<template>
	<view class="home-container">
		<!-- 顶部标题栏 -->
		<view class="header">
			<view class="title">美家十分</view>
		</view>

		<!-- 顶部轮播图 -->
		<swiper class="banner" circular autoplay interval="3000" duration="500">
			<swiper-item v-for="(item, index) in state.bannerList" :key="index">
				<view class="banner-item">
					<image :src="item.pic_url" mode="aspectFill" class="banner-img" />
					<view class="banner-content">
						<view class="banner-date">{{ item.date }}</view>
						<view class="banner-text">
							<view>{{ item.title }}</view>
							<view class="love-text" v-if="item.highlight">{{
                item.highlight
              }}</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>

		<!-- 最新活动区域 -->
		<view class="activities">
			<view class="section-header">
				<!-- <view class="fire-icon"> -->
				<img src="../../static/hit.png" alt="" class="fire-icon" />
				<!-- </view> -->
				<view class="section-title">最新活动</view>
				<view class="shopBtn" @click="toShopping">积分商城</view>
			</view>

			<!-- 活动列表 -->
			<view class="activity-list">
				<view class="activity-card" v-for="(activity, index) in state.activityList" :key="index">
					<view class="activity-content" @click="toActivityDetail(activity._id)">
						<image :src="activity.event_pic_url" mode="aspectFill" class="activity-img" @error="
                () => (activity.event_pic_url = '../../static/no-image.png')
              " />

						<view class="activity-info">
							<view class="activity-title">{{ activity.title }}</view>
							<view class="activity-meta">
								<view class="meta-item">
									<img src="../../static/location.png" class="iconfont icon-location" alt="" />
									<view>{{ activity.event_location }}</view>
								</view>
								<view class="meta-item">
									<img src="../../static/time.png" class="iconfont icon-time" />

									<view>
										{{ formatDateTime(activity.start_time) }}-{{
                      formatDateTime(activity.end_time)
                    }}
									</view>
								</view>
								<view class="meta-item">
									<img src="../../static/person.png" class="iconfont icon-user" />
									<view>{{ activity.now_count }}/{{ activity.max_count }}</view>
								</view>
							</view>
						</view>
						<view class="points">{{ activity.jackpoint }}积分</view>
						<view class="sign-up-btn">立即报名</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 活动资讯区域 -->
		<!--    <view class="news">
      <view class="section-header">
        <view class="section-title">活动资讯</view>
      </view>

      <view class="news-list">
        <view
          class="news-item"
          v-for="(news, index) in state.newsList"
          :key="index"
        >
          <image :src="news.image" mode="aspectFill" class="news-img" />
          <view class="news-info">
            <view class="news-title">{{ news.title }}</view>
            <view class="news-meta">
              <view class="news-date">{{ news.date }}</view>
              <view class="news-views">
                <img src="../../static/watch.png" class="iconfont icon-eye" />
                <view>{{ news.views }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view> -->

		<custom-tabbar currentPath="/pages/home/home"></custom-tabbar>
	</view>
</template>

<script setup>
	import {
		reactive,
		onMounted
	} from "vue";
	import {
		request,
		formatDateTime
	} from "../../js/util.js";
	import CustomTabbar from '@/components/custom-tabbar/custom-tabbar.vue'

	const state = reactive({
		bannerList: [{
			image: "/static/banner.png",
			date: "12月5日 世界志愿人日",
			text: "让世界充满",
			highlight: "爱",
		}, ],
		activityList: [],
		newsList: [{
				title: "五沙镇街村NBA决赛，冠军花落谁家",
				date: "2025-01-20",
				views: "182",
				image: "/static/news-1.jpg",
			},
			{
				title: "新年妈祖迎灯会",
				date: "2025-01-20",
				views: "182",
				image: "/static/news-2.jpg",
			},
		],
	});
	const toActivityDetail = (id) => {
		console.log("id :>> ", id);
		uni.navigateTo({
			url: `/pages/activityDetail/activityDetail?id=${id}`,
		});
	};

	//积分商城
	const toShopping = () => {
		uni.navigateTo({
			url: `/pages/shopping/shopping`,
		});
	}

	// 获取最新活动列表
	const getActivityList = async () => {
		let submitData = {
			condition: {
				status: 1,
			},
		};
		let data = await request("selectActivity", submitData);
		let data2 = await request("selectActivity", {
			condition: {
				status: 2,
			}
		});
		console.log("getActivityList", data, data2);
		if (data.status && data2.status) {
			let result = [...data.result, ...data2.result]
			state.activityList = result;
		} else {
			uni.showToast({
				title: "获取失败",
				icon: "error",
			});
		}
	};
	// 获取最新活动列表
	const getSlide = async () => {
		let submitData = {
			condition: {
				status: 1,
			},
		};
		let data = await request("selectSlide", submitData);

		console.log("getSlide", data);
		if (data.status) {
			let result = data.result

			state.bannerList = result;
		} else {
			uni.showToast({
				title: "获取失败",
				icon: "error",
			});
		}
	};

	// 获取资讯列表
	const getNewsList = async () => {
		try {
			const res = await uni.request({
				url: "/api/news/list",
				method: "GET",
			});

			if (res.statusCode === 200 && res.data.code === 0) {
				state.newsList = res.data.data;
			} else {
				uni.showToast({
					title: res.data.msg || "获取资讯列表失败",
					icon: "none",
				});
			}
		} catch (error) {
			console.error("获取资讯列表错误:", error);
			uni.showToast({
				title: "网络异常，请稍后重试",
				icon: "none",
			});
		}
	};

	// 页面加载时获取数据
	onMounted(() => {
		getActivityList();
		// getNewsList()
		getSlide()
	});

	// 下拉刷新
	const onPullDownRefresh = async () => {
		try {
			await Promise.all([getActivityList(), getNewsList()]);
		} finally {
			uni.stopPullDownRefresh();
		}
	};
</script>

<style lang="scss">
	.home-container {
		min-height: 100vh;
		background: linear-gradient(180deg, #f9d3cc 10%, #f8f8f8 30%);
		padding-bottom: 50rpx;

		.header {
			padding: 105rpx 30rpx 30rpx;
			// background-image: url("")
		}

		.banner {
			margin: 0 30rpx;
			height: 320rpx;
			border-radius: 24rpx;
			overflow: hidden;

			.banner-item {
				width: 100%;
				height: 100%;
				position: relative;
			}

			.banner-img {
				width: 100%;
				height: 100%;
				background: #ff6b6b;
			}

			.banner-content {
				position: absolute;
				top: 40rpx;
				left: 40rpx;
				color: #fff;

				.banner-date {
					font-size: 28rpx;
					opacity: 0.9;
				}

				.banner-text {
					margin-top: 20rpx;
					font-size: 48rpx;
					font-weight: bold;

					.love-text {
						font-size: 64rpx;
						margin-left: 10rpx;
					}
				}
			}
		}

		.activities {
			margin: 40rpx 30rpx;

			.section-header {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;

				.fire-icon {
					width: 45rpx;
					height: 45rpx;
					margin-right: 10rpx;
				}

				.section-title {
					font-size: 32rpx;
					font-weight: 500;
					color: #333;
				}

				.shopBtn {
					margin-left: 30rpx;
					border-radius: 20rpx;
					padding: 10rpx 20rpx;
					background-color: #ff6b6b;
					color: #fff;
				}

			}

			.activity-list {
				.activity-card {
					background: #fff;
					border-radius: 16rpx;
					margin-bottom: 20rpx;
					padding: 20rpx;

					.activity-content {
						display: flex;
						position: relative;

						.points {
							position: absolute;
							top: -20rpx;
							left: -20rpx;
							font-size: 24rpx;
							color: #fff;
							background-color: #ff6b6b;
							padding: 4rpx 16rpx;
							border-radius: 16rpx 0 16rpx 0;
						}

						.activity-img {
							width: 200rpx;
							height: 150rpx;
							border-radius: 8rpx;
						}

						.activity-info {
							flex: 1;
							margin-left: 20rpx;
							padding-right: 120rpx;

							.activity-title {
								font-size: 28rpx;
								font-weight: 500;
								color: #333;
								line-height: 1.4;
							}

							.activity-meta {
								margin-top: 16rpx;
								font-size: 24rpx;
								color: #666;

								.meta-item {
									display: flex;
									align-items: center;
									margin-bottom: 8rpx;

									.iconfont {
										margin-right: 8rpx;
										font-size: 24rpx;
										width: 30rpx;
										height: 30rpx;
									}
								}
							}
						}

						.sign-up-btn {
							position: absolute;
							right: 0;
							bottom: 0;
							background: linear-gradient(to top right, #ff8980, #f22d29);
							color: #fff;
							font-size: 24rpx;
							padding: 8rpx 32rpx;
							border-radius: 24rpx;
							line-height: 1.5;
							border: none;
							box-shadow: 0 4rpx 8rpx rgba(255, 107, 107, 0.2);

							&::after {
								border: none;
							}

							&:active {
								transform: scale(0.98);
							}
						}
					}
				}
			}
		}

		.news {
			margin: 40rpx 30rpx;

			.section-header {
				margin-bottom: 30rpx;

				.section-title {
					font-size: 32rpx;
					font-weight: 500;
					color: #333;
				}

			}

			.news-list {
				background: #fff;
				border-radius: 16rpx;
				padding: 20rpx;

				.news-item {
					display: flex;
					padding: 20rpx 0;
					position: relative;

					&:not(:last-child)::after {
						content: "";
						position: absolute;
						left: 0;
						right: 0;
						bottom: 0;
						height: 1rpx;
						background-color: #eee;
					}

					.news-img {
						width: 200rpx;
						height: 140rpx;
						border-radius: 8rpx;
						margin-right: 20rpx;
					}

					.news-info {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.news-title {
							font-size: 28rpx;
							color: #333;
							line-height: 1.4;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
						}

						.news-meta {
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: 24rpx;
							color: #999;
							margin-top: 10rpx;

							.news-views {
								display: flex;
								align-items: center;

								.iconfont {
									margin-right: 8rpx;
									width: 30rpx;
									height: 30rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>